import { createRouter, createWebHashHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import login from '../components/Login.vue'
import index from '../views/index.vue'
import baidu from '../components/baidu.vue'
import souhu from '../components/souhu.vue'

const routes = [
    { path: '/', component: login },
    {
        // 一级写 component
        path: '/index', component: index
        , children: [
            // 嵌套路由都会显示在 一级路由的组件中的 router-view 标签里
            {
                path: 'baidu',
                component: baidu
            },
            {
                path: 'souhu',
                component: souhu
            }
        ]
    },
    {

        // /hello 
        path: '/hello',
        // 一级不写 component, 在一级 组件中的 router-view 中显示
        // component: HelloWorld,
        children: [
            {
                path: '',
                component: HelloWorld
            },
            {
                // 当 /user/:id/profile 匹配成功
                // UserProfile 将被渲染到 User 的 <router-view> 内部
                path: 'baidu',
                component: baidu,
            },
            {
                // 当 /user/:id/posts 匹配成功
                // UserPosts 将被渲染到 User 的 <router-view> 内部
                path: 'souhu',
                component: souhu,
            },
        ],
    },
    // 异步
    { path: '/params/:name', component: () => import('../components/name.vue') },

];

const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes
});


export default router;